<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            height: 100%;
        }
        
        body {
            height: 100%;
            background-color: #dcdcdc;
        }
        
        .container {
            width: 70%;
            height: 100%;
            margin: 0 auto;
            /*border: 1px solid #ff0000;*/
            box-shadow: 3px 5px 5px;
            background-color: white;
        }
        
        .header {
            text-align: center;
            width: 100%;
            height: 70px;
            line-height: 70px;
            font-size: 25px;
            font-family: "微软雅黑";
            color: white;
            background-color: lightblue;
        }
        
        #app {
            width: 80%;
            margin: 50px auto;
        }
        
        #app #wage {
            width: 100%;
            /*margin-left: 10%;*/
            border-radius: 10px;
            padding: 8px 15px;
        }
        
        #app h2 {
            /*font-style: normal;*/
            font-family: "宋体";
            font-weight: normal;
            font-size: 22px;
            margin: 15px;
        }
        
        #app #show {
            margin: 50px 10px;
            padding: 0px 10px;
        }
        
        #show p {
            font-size: 20px;
            font-family: "宋体";
            line-height: 40px;
            overflow: hidden;
        }
        
        #show p input {
            height: 20px;
            width: 20px;
            border-radius: 5px;
            padding: 0px 5px;
        }
        
        #show p .left {
            float: left;
        }
        
        #show p .right {
            float: right
        }
        
        hr {
            margin: 15px 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">个税计算器</div>
        <div id="app">
            <input type="text" v-model.number="wages" id="wage">
            <h2 v-show="wages<1500">你的工资没有达到交税标准</h2>
            <div v-show="wages>1500" id="show">
                <p><span class="left">养老保险<input v-model="endPercent">%</span> <span class="right">{{end*1|cal(2)}}</span></p>
                <p><span class="left">医疗保险<input v-model="medicalPercent">%</span> <span class="right">{{medical*1 |cal(2)}}</span></p>
                <p><span class="left">失业保险<input v-model="unemplPercent">%</span> <span class="right">{{unemploy*1 |cal(2)}}</span></p>
                <p><span class="left">住房公积金<input v-model="fundPercent">%</span> <span class="right">{{fun*1 |cal(2)}}</span></p>
                <p><span class="left">税前工资</span> <span class="right">{{sqgz*1 |cal(2)}}</span></p>
                <p><span class="left">个人所得税</span> <span class="right">{{calculation*1 |cal(2)}}</span></p>
                <hr>
                <p><span class="left">你的工资</span><span class="right">{{salary*1|cal(2)}}</span></p>
            </div>
        </div>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            wages: 0,
            EndIns: 0,
            endPercent: 8,
            medicalIns: 0,
            medicalPercent: 8,
            unemployment: 0,
            unemplPercent: 0,
            fund: 0,
            fundPercent: 0,
            preTax: 0,
            personalTax: 0,
        },
        computed: {
            end() {
                var $f = this.wages * this.endPercent / 100
                if ($f < 7662) {
                    return $f
                } else {
                    return 7662
                }
            },
            medical() {
                var $f = this.wages * this.medicalPercent / 100
                if ($f < 7662) {
                    return $f
                } else {
                    return 7662
                }
            },
            unemploy() {
                var $f = this.wages * this.unemplPercent / 100
                if ($f < 7662) {
                    return $f
                } else {
                    return 7662
                }
            },
            fun() {
                var $f = this.wages * this.fundPercent / 100
                if ($f < 7662) {
                    return $f
                } else {
                    return 7662
                }
            },
            sqgz() {
                return this.wages * (1 - (this.endPercent / 100 + this.medicalPercent / 100 + this.unemplPercent / 100 + this.fundPercent / 100))
            },
            calculation() {
                var $w = this.wages
                    // 2.三险一金
                var sanXianYiJin = 0
                if ($w < 7662) {
                    sanXianYiJin = $w * (0.08 + 0.02 + 0.005 + 0.12)
                } else {
                    sanXianYiJin = 7662 * (0.08 + 0.02 + 0.005 + 0.12)
                }

                // 3.应纳税所得额
                var yinNaShuiSuoDeE = $w - sanXianYiJin - 3500
                    // 4.应那个人所得税
                if (yinNaShuiSuoDeE <= 0) {
                    return 0;
                }
                if (yinNaShuiSuoDeE <= 1500 && yinNaShuiSuoDeE > 0) {
                    return yinNaShuiSuoDeE * 0.03
                }
                if (yinNaShuiSuoDeE <= 4500 && yinNaShuiSuoDeE > 1500) {
                    return yinNaShuiSuoDeE * 0.1 - 105
                }
                if (yinNaShuiSuoDeE <= 9000 && yinNaShuiSuoDeE > 4500) {
                    return yinNaShuiSuoDeE * 0.2 - 555
                }
                if (yinNaShuiSuoDeE <= 35000 && yinNaShuiSuoDeE > 9000) {
                    return yinNaShuiSuoDeE * 0.25 - 1005
                }
                if (yinNaShuiSuoDeE <= 55000 && yinNaShuiSuoDeE > 35000) {
                    return yinNaShuiSuoDeE * 0.3 - 2755
                }
                if (yinNaShuiSuoDeE <= 80000 && yinNaShuiSuoDeE > 55000) {
                    return yinNaShuiSuoDeE * 0.35 - 5505
                }
                if (yinNaShuiSuoDeE > 80000) {
                    return yinNaShuiSuoDeE * 0.45 - 13505
                }
            },
            salary() {
                return this.sqgz - this.calculation
            }
        },
        filters: {
            cal(value, p2) {
                if (!value) return (0).toFixed(p2)
                return value.toFixed(p2)
            }
        }
    })
</script>

</html>